<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>Hello Component!</title>
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
</head>
<body>
  <div id="demo-blog1"></div>
  <div id="demo-blog2"></div>
  <script type="text/babel">
    var posts = [
      {
        title: 'test1',
        date: '2015-12-21',
        description: 'test1test1test1test1'
      },
      {
        title: 'test2',
        date: '2015-12-21',
        description: 'testtesttesttesttesttesttest2'
      },
      {
        title: 'test3',
        date: '2015-12-21',
        description: 'testtesttesttesttesttest3'
      }
    ];

    var arr = new Array();
    posts.map(function (post) {
      arr.push(<span>title: {post.title}, date: {post.date}, description: {post.description}</span>);
    })

    var BlogTitle = React.createClass({
      propTypes: {
        author: React.PropTypes.string.isRequired,
      },
      getDefaultProps: function() {
        return {
          author: 'Your name'
        };
      },
      render: function() {
        return <h1>blog of {this.props.author}</h1>;
      }
    });

    var BlogList = React.createClass({
      render: function () {
        return (
          <ul>
            {
              React.Children.map(this.props.children, function (child) {
                return <li>{child}</li>
              })
            }
          </ul>
        );
      }
    });

    var Blog = React.createClass({
      render: function () {
        return (
          <div>
            <BlogTitle author={this.props.author} />
            <BlogList>
              {this.props.postlist}
            </BlogList>
          </div>
        );
      }
    });

    ReactDOM.render(
      <Blog author="xcold" postlist={arr} />,
      document.getElementById('demo-blog1')
    );

    ReactDOM.render(
      <Blog postlist={arr} />,
      document.getElementById('demo-blog2')
    );
  </script>
</body>
</html>
